<template>
    <div class="goods-content">
        <div class="goods-show-div"
             v-for="item in goods">
            <a :href="item.GoodsId">
                <img class="goods-show-img"
                     :src="item.Images[0]" />
            </a>
            <p class="goods-name">{{item.GoodsName}}</p>
            <p class="goods-name">￥{{item.Price}}</p>
        </div>
    </div>
</template>

<style>
.goods-content {
    margin-top: 100px;
    margin-left: 150px;
    min-height: 500px;
    max-width: 1200px;
}

.goods-show-img {
    margin: 23px 23px 0px 23px;
    min-height: 500px;
    max-width: 550px;
}

.goods-show-div {
    display: inline-block;
    text-align: center;
}

.goods-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 12px;
    vertical-align: baseline;
}
</style>
<script>
export default {

    data: function () {
        return {
            goods: []
        }
    },
    mounted: function () {
        var _this = this;
        var id = this.$route.params.id;
        var categorize;
        if (id == "Men") {
            categorize = "男士"
        }
        if (id == "Women") {
            categorize = "女士"
        }
        if (id == "Children") {
            categorize = "儿童"
        }
        getgGoodsInfo: {
            $.ajax({
                type: "Post",
                url: "/api/Goods/GetGoodsInfo",
                dataType: "json",
                data: {
                    "": categorize
                },
                dataType: "json",
                success: function (data) {
                    for (var value of data) {
                        value.GoodsId = "http://localhost:60861/#/CommodityDetailsPage/" + value.GoodsId;
                        _this.goods.push(value);
                    }
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        }
    }
    // methods() {
    //     const Foo = {
    //         template: `...`,
    //         beforeRouteEnter(to, from, next) {
    //             // 在渲染该组件的对应路由被 confirm 前调用
    //             // 不！能！获取组件实例 `this`
    //             // 因为当钩子执行前，组件实例还没被创建
    //         },
    //         beforeRouteUpdate(to, from, next) {
    //             // 在当前路由改变，但是该组件被复用时调用
    //             // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    //             // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    //             // 可以访问组件实例 `this`
    //         },
    //         beforeRouteLeave(to, from, next) {
    //             // 导航离开该组件的对应路由时调用
    //             // 可以访问组件实例 `this`
    //         }
    //     }
    // }
}
</script>